<template>
  <div class="contaienr-item-button" @click="handleClick">
    <i class="el-icon-loading" v-if="loading" />
    <i :class="icon" v-if="icon && !loading" />
    <span style="container-slot">
      <slot>这是一个按钮</slot>
    </span>
  </div>
</template>

<script>
export default {
  name: 'item-input',
  props: {
    icon: {
      type: String,
      default: '',
    },
    loading: [Boolean, String],
    disabled: [Boolean, String],
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt);
    },
  },
};
</script>

<style lang="less" scoped>
.contaienr-item-button {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  .container-slot {
    position: relative;
    z-index: 1;
  }
}
</style>
